<template>
  <div class="login-mengban">
        <div class="login-box">
            <form action="">
               <div class="login-reg-select clearFix">
                   <a @click="toLog" href="#" class="login-select-btn a1 "><i v-if="isLogin" class="login-on"></i>登录</a>
                   <a @click="toReg" href="#" class="reg-select-btn"><i v-if="!isLogin" class="reg-on"></i>注册</a>
               </div>

               <div  v-if="flag" class="reg-details account-box"  >
                    <label for="reg_account"></label>
                    <input type="text" id="reg_account" placeholder="取个名字吧"/>
                    <label for="reg_pwd"></label>
                    <input type="password" id="reg_pwd" placeholder="设一个密码吧"/>
                    <label for="reg_pwd_confirm"></label>
                    <input type="password" id="reg_pwd_confirm" placeholder="再输一遍密码吧"/>
                    <div class="check_code clearFix">
                        <div class="check-input">
                            <label for="check_code_input2"></label>
                            <input type="text" id="check_code_input2" placeholder="验证码"/>
                        </div>
                        <div class="check-pic">
                            <img src="../indexImg/check-code_04.png" alt=""/>
                        </div>
                    </div>
                    <label for="reg-btn"></label>
                    <input type="submit" id="reg-btn" value="注册"/>
                </div>
                <div v-else class="login-details account-box"  style="display:block">
                    <label for="login_account"></label>
                    <input type="text" id="login_account" v-model="userInfo.username" placeholder="用户账号"/>
                    <label for="login_pwd"></label>
                    <input type="password" id="login_pwd" v-model="userInfo.password" placeholder="用户密码"/>
                    <div class="check_code clearFix">
                        <div class="check-input">
                            <label for="check_code_input1"></label>
                            <input type="text" id="check_code_input1" placeholder="验证码"/>
                        </div>
                        <div class="check-pic">
                            <img src="../indexImg/check-code_04.png" alt=""/>
                        </div>
                    </div>
                    <label for="login-btn"></label>
                    <div @click="log" id="login-btn">登录</div>
                    <div class="other-login">
                        <p>你还可以用第三方帐号登录</p>
                        <a href="#"><img src="../indexImg/qqIcon.png" alt=""/></a>
                        <a href="#"><img src="../indexImg/weixinIcon.png" alt=""/></a>
                        <a href="#"><img src="../indexImg/weiboIcon.png" alt=""/></a>
                    </div>
                </div>
                
            </form>
            <a class="findback-pwd" href="#">忘记密码?</a>
        </div>
    </div>
</template>

<script>
import "../style/init.css";
import "../style/commonHeader.css";
import "../style/commonFooter.css";
import "../style/login-tanchuceng.css";

import api from'../../api'
export default {
  data(){
    return {
      flag:true,
      isLogin:false,
      userInfo:{
        username:'',
        password:''
      }
    }
  },
  methods:{
    toReg(){
      this.flag=true
      this.isLogin=false
    },
    toLog(){
      this.flag=false
      this.isLogin=true
    },
    log(){
      console.log(this.userInfo.username,this.userInfo.password);
      api.getlogin({
        username:this.userInfo.username,
        password:this.userInfo.password
      }).then(res =>{
        console.log(res);
        if(res.status==200){
          //把用户信息存入本地
          localStorage.setItem('username', JSON.stringify(res.data.data.username));
          //登录成功 跳转到个人中心页
          this.$router.push("/ucenter")
        }
      })
    }
  }
};
</script>

<style>
.login-mengban {
  background: url("../indexImg/login-back_02.png");
  width: 100%;
  overflow: hidden;
  position: relative;
  display: block;
  min-height: 800px;
}
.login-box {
  width: 300px;
  height: 364px;
  background: #666;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 18px 20px;
  z-index: 20000;
  display: block;
}
</style>